import React, { Component } from 'react';
import './index.css'
import {config, url} from "../../util/config";
export default class UEditor extends Component {
    state={
        isFullScreen:false
    }
    componentDidMount() {
        let script = document.createElement("script");
        script.setAttribute('src', 'static/dist/utf8-php/ueditor.config.js');
        document.getElementsByTagName('head')[0].appendChild(script);
        script = document.createElement("script");
        script.setAttribute('src', 'static/dist/utf8-php/ueditor.all.js');
        document.getElementsByTagName('head')[0].appendChild(script);

        const that = this
        script.onload = () => {
            let UE = window.UE;
            var ue = UE.getEditor("container", {
                initialFrameHeight: 300
            });

            this.editor = ue;

            ue.addListener('contentChange', () => {
                that.props.onChange(ue.getContent())
            })

            ue.addListener('beforefullscreenchange',function(event,isFullScreen){
                // alert(isFullScreen?'全屏':'默认')
                that.setState({isFullScreen:isFullScreen})
            })
        }
    }

    // componentWillUnmount() {
    //     this.editor.destroy();
    //
    //     let child = document.getElementById("edui_fixedlayer")
    //     child.parentNode.removeChild(child);
    // }

    render() {
        return (
            <div>
                <textarea id="container" className={this.state.isFullScreen?"ueditor-iframe-holeScreen":"ueditor-iframe-default"}  name="blog" type="text/plain" value={this.props.data} ></textarea>
            </div>
        )
    }
}
